<template>
   <main-layout>

     <div class="userbox">
    <van-button type="default" class="gohome" to="/Home">返回首页</van-button>
    <div class="userinfor">
         
        <img src="../../images/login-icon.png" alt="" @click="changInfor(it)">
        <br>
       <input type="text" placeholder="个人中心">
     </div> 
  
    <div class="detailList">
        <van-goods-action>
              <van-goods-action-icon icon="chat-o" text="订单" dot />
              <van-goods-action-icon @click="gocart(it)" icon="cart-o" text="购物车" badge="5"  />
              <van-goods-action-icon icon="shop-o" text="收藏" badge="3" />
              <van-goods-action-icon icon="shop-o" text="浏览足迹" badge="12" />
       </van-goods-action>
    </div>

     <div class="moreList">
       <div class="function">
         <img src="../../images/user/wallet.png" >
         <p>钱包</p>
       </div>
      
       <div class="function">
       <img src="../../images/user/Sign.png">
       <p>每日签到</p>
     </div>
    </div> 


     <div class="help">
       <van-index-bar >
         <van-index-anchor index="fals">更多功能</van-index-anchor>
         <van-cell title="联系客服" />
         <van-cell title="打分好评" />
         <van-cell title="关于我们" @click="goqua" />
       </van-index-bar>
     </div>

      <!-- <div class="product-box" >
          <div class="productList" v-for="p in productList" :key="p.id">
              <img :src="p.image" alt="" class="imgs">
              <div class="right-box">
                <div class="name">{{p.title}}</div>
                <div class="couponValue">{{p.couponValue}}</div>
                <div class="price"><em>卷后价￥</em>{{p.price}}</div>
                <button class="addBtn" @click="cartAdd(p)">加入购物车</button>
              </div>
          </div>
      </div>   -->


</div>
 </main-layout>

    
</template>


<script>
 import { cartListApi,cartAddApi } from '../../apis/cartApi'
export default {

 data() {
    return {
      

    };
  },


   methods:{
     changInfor(it){
      this.$router.push("/Userinfor")
     },
    gocart(it){
         this.$router.push("/Cart")
            //  给购物车数量赋值   
   },
   goqua(){
       this.$router.push("/qualification")
   }
}}
</script>

<style lang="less" scoped>

    @import "../../style/common.less";
    .userbox {
       
        display: block;
        position: relative;
        height: 100%;
        padding: 4vh 20px 0;
        // background-color: #fff;
        
        
      .userinfor{
        text-align: center;
        
        >img{
        width:50px;
        margin-bottom: 10px;    
    }
        input{
        font-size: 16px;
        margin-bottom: 25px;
        border: 0 solid  ;
        background-color: @cf5;
        text-align: center;
        
      }


      
}
      .detailList{
        width: 100%;
        height: 80px;
        position: relative;
        .van-goods-action{
         position: absolute;
         height: 85px;
         justify-content: space-between;
        
        

       
        }

      }

      .moreList{
        width: 100%;
        display:flex;
        position: relative;
        justify-content: space-between;
        margin-top: 10px;
        padding: 10px 0;
        background-color: @cff;
       
       

        .function{
          width: 180px;
          text-align: center;
       
          
          

          >img{
          width: 50px;  
          height: 50px;
          margin: 10px;
          }
          
          p{
            width: 180px;
            height: 30px;
            text-align: center;
            flex-flow: wrap;
            font-size: 14px;
            margin-top: -10px;

          }
        
     }
        }
        .help{
          margin-top: 10px;
          .van-index-anchor{
              background-color:@cff;
          }
        }
    //      .product-box{
    // height: 700px;
    // overflow: auto;
    // background-color: #eaeaea;
    // .productList{
    //   display: flex;
    //   flex-wrap: nowrap;
    //   margin: 10px;
    //    background-color: hsl(0deg 0% 100% / 90%);
    //   .imgs{
    //     width: 150px;
    //     height: 150px;
    //     border-radius: 8px;
    //     margin-right: 10px;
    //   }
    //   .right-box{
    //     overflow: hidden;
    //     .name{
    //       margin: 10px 0;
    //       overflow: hidden;
    //       text-overflow: ellipsis;
    //       white-space: nowrap;
    //     }
    //     .couponValue{
    //       width: 50px;
    //       height: 20px;
    //       margin: 10px 0;
    //       line-height: 20px;
    //       color: #fa585a;
    //       text-align: center;
    //       border-radius: 2px;
    //       box-shadow: inset 0 0 0 1px #fa585a;
    //     }

    //     .price{
    //        margin: 10px 0;
    //        font-size: 1.2rem;
    //        font-weight: 600;
    //        color: #e70012;
    //        > em{
    //          font-size: .8rem;
    //          font-weight: 400;
    //          font-style: normal;
    //        }
    //     }
    //     .addBtn{
    //       color: #fff;
    //       border: none;
    //       width: 100px;
    //       height: 35px;
    //       border-radius: 5px;
    //      background-color: rgb(250, 88, 90)
    //     }
    //   }}}
    
    
        
 }
</style>